<template>
  <div class="category-list">
    <div class="category-list-main">
      <img class="banner" :src="currentData.banner_url" alt="">
      <div class="category-title">
        <span class="line"></span>
        <span class="title">{{currentData.name | nameFilter}}</span>
        <span class="line"></span>
      </div>
      <div class="category-list-items">
        <div class="category-list-item" 
             v-for="item in currentData.subList"
             :key="item.id"
             @click="itemClick(item)">
             <img :src="item.wap_banner_url" alt="">
             <p>{{item.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    currentData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  filters: {
    nameFilter(val) {
      return val + '分类'
    }
  },
  methods: {
    itemClick(item) {
      let index = this.currentData.subList.findIndex(items => items.id == item.id);
      let id = this.currentData.subList[index].id
      console.log(index, id)
      this.$router.push({
        path: '/categorylist',
        query: {
          id,
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.category-list {
  width: 80%;
  .category-list-main {
    padding: 0 20px;
    .banner {
      width: 261px;
      height: 111px;
    }
    .category-title {
      margin: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      .line {
        width: 20px;
        height: 1px;
        background-color: #999;
      }
      .title {
        margin: 0 5px;
      }
    }
    .category-list-items {
      display: flex;
      flex-wrap: wrap;
      .category-list-item {
        width: 33%;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 72px;
          vertical-align: middle;
          margin-bottom: 10px;     
        }
        p {
          text-align: center
        }
      }
    }
  }
}
</style>